﻿@using xConnected.Common.ExpertProfile
<div class="modal-wide hide fade" id="CategoriesCompanyDialog" style="display: none;" >
    <div class="modal-header">
    </div>
    <div class="modal-body">
        <div class="thumbnail" style="margin-bottom: 20px;">
            <div class="row-fluid" style="margin-left: 10px; margin-right: 10px; margin-bottom: 10px; margin-top: 10px">
                <div data-bind="visible: $root.company.selectCatVisible" style="margin-bottom: 10px"><span><strong>Select Category</strong></span></div>
                <div data-bind="visible: $root.company.selectCatNotVisible, click: function(){$root.company.selectCatVisible(true); $root.company.selectCatNotVisible(false);}" style="margin-bottom: 10px"><a href="#"><strong>Select Category</strong></a></div>
                <div data-bind="visible: $root.company.selectCatVisible">
                    <div>
                        <ul class="breadcrumb" data-bind="foreach: $root.company.breadCrumbCategories" style="margin-right: 20px">
                            <li><a href="#" data-bind="text: Description, click: function() { $root.company.selectBreadCrumbCategory($data); }"></a><span class="divider"><i class="icon-arrow-right"></i></span></li>
                        </ul>
                    </div>
                    <div>
                        <ul data-bind="foreach: $root.company.availableCategories" class="unstyled">
                            <li class="row-fluid" style="margin-bottom: 5px">
                                <button class="btn btn-small" data-bind="click: function() { $root.company.addCategory($data); }"><span data-bind="text: Description"></span> <i class="icon-share-alt" data-bind="css: { 'icon-plus': $data.IsLeaf }"></i></button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="thumbnail" data-bind="with: workingCompanyBuffer" style="margin-bottom: 20px;">
            <div class="row-fluid" style="margin-left: 10px; margin-right: 10px; margin-bottom: 10px; margin-top: 10px">
                <span><strong>Selected Categories</strong></span>
                <div style="padding-top: 10px">
                    <div>
                        <ul data-bind="foreach: Categories" class="unstyled">
                            <li class="row-fluid" style="margin-bottom: 5px">
                                <button class="btn btn-small" data-bind="click: function() { $root.company.removeCategory($data); }"><span data-bind="text: Description"></span> <i class="icon-remove"></i></button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn btn-small btn-info" data-bind="click: function() { $root.company.okCategories();}"><strong>@Resources.Ok</strong></a>
        <a href="#" class="btn btn-small" data-bind="click: function() { $root.company.cancelCategories();}"><strong>@Resources.Cancel</strong></a>
    </div>
</div>